<template>
	<BaseContainer
		class="report-table-wrapper"
		v-loading="loading"
		element-loading-text="加载中..."
		element-loading-background="rgba(255, 255, 255, 0.8)"
	>
		<div style="margin-top: 30px;">
			<AplidForm ref="formRef" v-bind="searchConfig" v-model="time" @submit="search" @reset="reset">
				<template #btn>
					<el-button v-if="isDetail" type="primary" @click="isDetail = false">编辑</el-button>
					<el-button v-if="!isDetail" type="primary" @click="save">保存</el-button>
				</template>
			</AplidForm>
		</div>
		<div class="t-header">
			<div class="article-title">
				<span>{{ yearNow }}年{{areaName}}各街道户籍老年人口数</span>
			</div>
		</div>
		<table style="width: 100%;margin: auto" border="1" cellspacing="1">
			<tr>
				<th>街道</th>
				<th>户籍老年人口数</th>
			</tr>
			<tr v-for="item in initData" :key="item.streetName">
				<td>{{ item.streetName }}</td>
				<td>
					<el-input v-if="!isDetail" type="text" class="w-100" v-model="item.numberOfPopulation" />
					<span v-else>{{ item.numberOfPopulation }}</span>
				</td>
			</tr>
		</table>
	</BaseContainer>
</template>

<script setup lang="ts">
import apiMod from '@/apiMod'
import { dayjs } from 'element-plus'
import { getStore } from '@/utils/store';
let areaName  = ref('')
areaName.value = getStore('userInfo').organizationName
const searchConfig = {
	inline: true,
	showBtn: true,
	column: [
		{
			label: '年份',
			prop: 'year',
			type: 'date',
			format:'YYYY',
			valueFormat:"YYYY",
			span: 12,
		},
	],
}

const loading = ref(false)
const isDetail = ref(true)
const time = ref()
const yearNow = dayjs(new Date()).format('YYYY')
const initData = ref()

const search = (form, done) => {
	getData(time.value?.year || yearNow)
	done()
}

const reset = () => {
	getData(yearNow)
}

const save = () => {
	const isEdit = initData.value.some(item => item.id)
	if(isEdit) {
		apiMod.view_registeredElderlyPopulation_edit(initData.value)
	} else {
		initData.value.forEach(item=>{
			item.year = time.value?.year || yearNow
		})
		apiMod.view_registeredElderlyPopulation_add(initData.value)
	}
	ElMessage.success('提交成功！')
	isDetail.value = true
}

const getData = (year) => {
	apiMod.view_registeredElderlyPopulation_list({year}).then(res=>{
		initData.value = res.data
	})	
}
onMounted(() => {
	getData(yearNow)
})

onUnmounted(() => {})
</script>

<style scoped lang="scss">
.report-table-wrapper {
	width: 100%;
	margin: 0 auto;
	padding: 50px 100px;
	top: 0;

	.t-header {
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		padding: 15px 0;

		.text-sm {
			font-weight: 400;
			font-size: 16px;
		}
	}
}
table {
  border-collapse: collapse;
	td, th {
		text-align: center;
		height: 35px;
	}
}
:deep(.el-input__inner) {
  text-align: center;
	width: 50%;
	height: 25px;
}

.article-title {
	position: relative;
	z-index: 0;
	width: 63%;
	margin: 0 auto;
}

</style>
